<template>

    <div class="file-item-ui" :title="`名称：${data.title}\n大小：${data.fileDetailsInfo ? File.bytes2size(data.fileDetailsInfo.fileSize) : '未知'}\n类型：${File.fileIcon(_suffix).label}`" v-bind:class="{ 'is-selected':data.selected && data.isCheckbox}">
        <div :class="((data.isCheckbox || data.coverUUID)&&isResoucre) ||((!isResoucre)&&(data.fileDetailsInfo&&TYPE.includes(data.fileDetailsInfo.fileSuffix)))?'': 'shade'">
            <el-image class="image" :src="_cover || ''" fit="cover">
                <el-image style="height:85px;width:85px" slot="error" :src="File.fileIcon(_suffix).image || ''">
                    <el-image slot="error" :src="require('@img/file-unknown.png')"></el-image>
                </el-image>
            </el-image>
        </div>
        <div class="title" :title="`名称：${data.title}\n大小：${data.fileDetailsInfo ? File.bytes2size(data.fileDetailsInfo.fileSize) : '未知'}`">
            {{data.title}}
        </div>
        <div v-bind:class="{ 'is-selected-checkbox':data.selected && data.isCheckbox}" v-if="((data.isCheckbox || data.coverUUID)&&isResoucre) ||((!isResoucre)&&data.fileDetailsInfo&&TYPE.includes(data.fileDetailsInfo.fileSuffix)) " @click="_onDiv">
            <el-checkbox class="checkbox" v-model="data.selected" @change="_onChangeBox"></el-checkbox>
        </div>
        <!-- v-if="isResoucre && (data.fileDetailsInfo && TYPE.includes(data.fileDetailsInfo.fileSuffix))" -->
    </div>

</template>


<script>

import File from '@utils/file';
const TYPE = ['xlsx', 'xls', 'txt', 'csv', 'xml', 'json'];

export default {
    name: 'material-item',
    props: {
        data: { type: Object, default() { return {} } },
        isResoucre: { type: Boolean, default: true },//控制是否显示普通的资源，默认ture
    },
    data() {
        return {
            TYPE,
            File
        }
    },
    computed: {
        //封面
        _cover() {
            let { fileDetailsInfo } = this.data || {}
            return File.preview((fileDetailsInfo || {}).thumbnailUUID)
        },

        //后缀
        _suffix() {
            let { fileDetailsInfo, rootType, parentId, type } = this.data || {}
            let { fileSuffix } = fileDetailsInfo || {}
            if (!fileSuffix) return parentId != undefined ? 'file' : rootType || type
            return File.icon(fileSuffix)
        },
    },
    methods: {
        // 勾选checkbox
        _onChangeBox() {
            console.log(this.data);
            console.log(eval('console.log(123)'));
            this.$emit("on-change", this.data)
        },

        _onDiv(event) {
            event.stopPropagation();//阻止点击事件向上冒泡
        }
    }
}
</script>

<style lang="scss" scoped>
.file-item-ui {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    border: 1px solid #dddd;
    text-align: center;
    .image {
        height: 110px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .title {
        width: calc(100% - 10px);
        padding: 5px;
        font-size: 10px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        border-top: 1px solid #dddd;
    }
    .blue {
        color: #1f83ca;
    }
    .checkbox {
        position: absolute;
        overflow: hidden;
        text-align: left;
        border-top-left-radius: 3px;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 2px 0px 2px 3px;
    }
    .checkbox:hover {
        background: rgba($color: #000000, $alpha: 0.5);
    }
    .is-selected-checkbox {
        background: rgba($color: #000000, $alpha: 0.5);
    }
    &.is-selected {
        box-shadow: 3px -1px 10px 0px #4c81ff;
        color: #4c81ff;
        .checkbox {
            background: #405c7dad;
        }
        /* animation: changeshadow 1s ease-in infinite;*/
        /* 其它浏览器兼容性前缀 */
        /*-webkit-animation: changeshadow 1s linear infinite;
         -moz-animation: changeshadow 1s linear infinite;
         -ms-animation: changeshadow 1s linear infinite;
         -o-animation: changeshadow 1s linear infinite;*/
    }
    @keyframes changeshadow {
        0% {
            box-shadow: 0 0 1px $color-danger inset;
        }
        50% {
            box-shadow: 0 0 6px $color-danger inset;
        }
        100% {
            box-shadow: 0 0 1px $color-danger inset;
        }
    }
    /* 添加兼容性前缀 */
    @-webkit-keyframes changeshadow {
        0% {
            box-shadow: 0 0 1px $color-danger inset;
        }
        50% {
            box-shadow: 0 0 6px $color-danger inset;
        }
        100% {
            box-shadow: 0 0 1px $color-danger inset;
        }
    }
    @-moz-keyframes changeshadow {
        0% {
            box-shadow: 0 0 1px $color-danger inset;
        }
        50% {
            box-shadow: 0 0 6px $color-danger inset;
        }
        100% {
            box-shadow: 0 0 1px $color-danger inset;
        }
    }
    @-ms-keyframes changeshadow {
        0% {
            box-shadow: 0 0 1px $color-danger inset;
        }
        50% {
            box-shadow: 0 0 6px $color-danger inset;
        }
        100% {
            box-shadow: 0 0 1px $color-danger inset;
        }
    }
    @-o-keyframes changeshadow {
        0% {
            box-shadow: 0 0 1px $color-danger inset;
        }
        50% {
            box-shadow: 0 0 6px $color-danger inset;
        }
        100% {
            box-shadow: 0 0 1px $color-danger inset;
        }
    }
    &.can-select.is-hover .checkbox,
    &.can-select.is-selected .checkbox {
        right: 0;
    }
    &.is-out .checkbox {
        right: -100px;
    }
    .shade {
        opacity: 0.3;
    }
}
</style>